<template>
    <w-tab-list @clear-selection="clearSelection"
                 @refresh-data="refreshData(true)"
                 @switch-page="switchPage"
                 @delete-batch="deleteBatch"
                 @open-add-from="insert"
                 :total="paging.total"
                 :page-size="paging.pageSize"
                 :frame="false"
                 ref="wWabList"
    >
        <template #searchBar>
            <el-row class="row" :gutter="20">
                <el-col :span="5">
                    公司名称：<el-select v-model="search.companyName" disabled>
                                <el-option v-for="(item) in companyOptions" :label="item.name" :value="item.name"/>
                            </el-select>
                </el-col>
                <el-col :span="6">
                    部门名称：<el-select-v2 v-model="search.deptId" :options="deptOptions"
                        placeholder="所有部门" clearable filterable @change="selectDept"/>
                </el-col>
            </el-row>
            <el-row class="row bottom-row" :gutter="20">
                <el-col :span="5" class="col">
                    <span class="sh-title">员工姓名：</span>
                    <el-input v-model="search.empName" placeholder="输入员工姓名" clearable/>
                </el-col>
                <el-col :span="6" class="col">
                    <span class="sh-title">员工工号：</span>
                    <el-input v-model="search.workId" placeholder="输入员工工号" clearable/>
                </el-col>
                <el-col :span="5" class="col">
                    <span class="sh-title">职位：</span>
                    <el-select v-model="search.positionId" clearable filterable placeholder="所有职位" @change="loadEmpPageInfo">
                        <el-option v-for="(item) in positionOptions" :value="item.value" :label="item.label"/>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-tooltip placement="top" content="清空搜索框">
                        <el-button type="default" :icon="Refresh" @click="clearSearch(true)">重置</el-button>
                    </el-tooltip>
                    <el-button type="primary" :icon="Search" @click="searchActive">搜索</el-button>
                </el-col>
            </el-row>
        </template>
        <template #dataList>
            <el-table stripe :data="empData" @selection-change="saveSelection" header-row-class-name="header-class" v-loading="loading.value" ref="roleTable" size="small" element-loading-text="正在加载员工表格数据">
                <el-table-column type="index" width="30px" align="center">
                    <template #default="s">
                        {{s.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="员工编号" width="80px" align="left"/>
                <el-table-column prop="empName" label="员工姓名"/>
                <el-table-column prop="workId" label="工号" width="80px"/>
                <el-table-column prop="dept.deptName" label="所属部门"/>
<!--                <el-table-column prop="" label="职称"/>-->
                <el-table-column prop="position.name" label="职位"/>
                <el-table-column prop="phone" label="联系电话"/>
                <el-table-column label="状态">
                    <template #default="s">
                        <template v-if="s.row.status === 1">
                            在职
                        </template>
                        <template v-else>
                            离职
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="hireDate" label="入职日期"/>
<!--                <el-table-column label="是否在线" width="70" align="center">-->
<!--                    <template #default="s">-->
<!--                        <template v-if="s.row.online===1">-->
<!--                            <el-tooltip content="在线" placement="top"><Monitor color="red" width="20px" height="20px"></Monitor></el-tooltip>-->
<!--                        </template>-->
<!--                        <template v-else>-->
<!--                            <el-tooltip content="未在线" placement="top"><Monitor color="gray" width="20px" height="20px" title="离线"/></el-tooltip>-->
<!--                        </template>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column prop="" label="上级编号"/>-->
<!--                <el-table-column prop="createTime" label="创建时间"/>-->
                <el-table-column label="操作" width="200">
                    <template #default="s">
                        <el-button type="primary" size="small" @click="assignClick(s.row)">分配角色</el-button>
                        <el-button type="text" size="small" @click="resetPwd(s.row)" :icon="Key">重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </w-tab-list>
    <emp-form width="40%" ref="empForm" @refresh-data="refreshData"/>
    <assign-role-form width="40%" ref="assignForm"/>
</template>

<script>
import {Search,Refresh,RefreshRight,CollectionTag,Delete,Plus,Edit,DArrowRight,Picture,Failed,View,Avatar,Key} from '@element-plus/icons-vue'
import WTabList from "../../com/WTabList.vue";
import {getDeptOptions} from "../../../network/sys/dept";
import {getPositionOptions} from "../../../network/sys/position";
import {getEmpPageInfo, replacementEmpPwd} from "../../../network/emp";
import {getCompanyOptions} from "../../../network/sys/company";
import {ElMessage} from "element-plus";
import EmpForm from "../../per/emp/comps/EmpForm.vue";
import AssignRoleForm from "./AssignRoleForm.vue";

export default {
    name: "EmpMain",
    components:{
        EmpForm,
        WTabList,
        AssignRoleForm
    },
    setup(props){
        return{
            Key,
            Avatar,
            Search,
            Refresh,
            RefreshRight,
            CollectionTag,
            Delete,
            Plus,
            Edit,
            DArrowRight,
            Picture,
            Failed,
            View
        }
    },
    data(){
        return{
            deptOptions: [],
            positionOptions:[],
            companyOptions: [],
            empData: [],
            selection: [],
            paging:{
                total: 100,//记录总数
                pageSize: 9,//每页记录数
                pageNum: 1,//当前页码
                pagerCount: 8,//最大页码按钮数，限定在(5 ≤ x ≤ 21 的奇数)
            },
            search:{
                empName: null,
                workId: null,
                positionId: null,
                deptId: null,
                companyName: '韬睿股份有限公司',
            },
            loading:{
                value:false
            }
        }
    },
    methods:{
        resetPwd(emp){
            this.$operate.confirm({
                title: '重置密码',
                hint: `你确认要重置用户 '${emp.empName}' 的密码吗？`,
                executeFn: ()=>{
                    replacementEmpPwd({empId:emp.id}).then(vo=>{
                        this.$response.handle({
                            data:vo,
                            success: '用户密码重置成功',
                            error: '重置用户密码失败',
                            log: '重置用户密码结果'
                        })
                    })
                }
            })
        },
        /*1、搜索框管理*/
        //搜索执行函数
        searchActive(){
            this.$utils.searchActive({
                data: this.search,
                initData: this.$options.data.call(this).search,
                executeFn:()=>{
                    this.loadEmpPageInfo();
                }
            })
        },
        //清空搜索框
        clearSearch(hint){
            this.$utils.resetSearchParams({
                initData: this.$options.data.call(this).search,
                data: this.search,
                hint: hint,
                callback: ()=>{
                    this.loadEmpPageInfo();
                }
            });
        },
        selectDept(){
            this.loadEmpPageInfo();
        },
        assignClick(emp){
            let frm = this.$refs.assignForm;
            frm.visible = true;
            frm.title = '用户角色分配';
            frm.obj = emp;
        },
        /*2.数据操作*/
        //批量删除元素
        deleteBatch(){

        },
        //编辑记录
        edit(row){
            row.editable = true;
            this.cacheRow = this.$utils.clone(row);
        },
        //取消编辑
        cancelEdit(row){
            Object.assign(row,this.cacheRow)
            row.editable = false;
        },
        //批量编辑
        batchEdit(){
            this.selection.forEach(s=>{
                s.editable = true;
            })
        },
        remove(id){
            console.log('删除角色无')
        },
        batchDeleteRole() {
            console.log('批量删除角色无')
        },
        viewResume(id){
            console.log('resumeId',id)
            this.$router.push(`/emp/resume/${id}`)
        },
        //保存修改
        saveEdit(row){
            // this.$operate.update({
            //     title: '修改角色',
            //     executeFn:()=>{
            //         updateRole(row).then(data=>{
            //             this.$response.handle({
            //                 data: data,
            //                 success: '修改成功',
            //                 error: '修改失败',
            //                 successFn:()=> {
            //                     this.loadEmpPageInfo();
            //                 }
            //             })
            //         })
            //     },
            //     cancelFn:()=>{
            //         Object.assign(row,this.cacheRow);
            //     }
            // })
        },
        //修改角色状态
        switchEnabled(){
            return this.$operate.switchStatus({
                title: '修改用户状态',
                hint: '你确认要更改该用户状态吗'
            });
        },
        //修改角色状态执行
        async enableChange($event,row){
            console.log('val',$event);
            console.log('id',row.id)
            // await updateRole({
            //     id: row.id,
            //     enabled: $event
            // }).then(data=>{
            //    this.$response.handle({
            //        data:data,
            //        success: '修改成功',
            //        error: '修改失败'
            //    })
            // })
        },
        /*3.分页管理*/
        //切换页面
        async switchPage(index){
            this.paging.pageNum = index;
            await this.loadEmpPageInfo();
        },
        /*4.对话框管理*/
        //打开新增对话框
        insert(){
            let frm = this.$refs.empForm;
            frm.visible = true;
            frm.title = '新增员工'
            frm.type = 0;

        },
        /*5.表格管理*/
        //刷新表格数据
        refreshData(hint){
            this.loadEmpPageInfo(hint);
        },
        //保存用户选中行数据
        saveSelection(selection){
            this.selection = selection;
        },
        clearSelection(){
            // this.$refs.roleTable.clearSelection();
        },
        /*6.数据加载项*/
        loadCompanyOptions(){
            getCompanyOptions().then(data=>{
                console.log('公司选项',data);
                this.companyOptions = data.data;
            })
        },
        loadDeptOptions(){
            getDeptOptions(1).then(data=>{
                console.log('韬睿公司部门选项',data);
                this.deptOptions = data.data;
            })
        },
        loadPositionOptions(){
            getPositionOptions().then(data=>{
                console.log('岗位选项',data);
                this.positionOptions = data.data;
            })
        },
        loadEmpPageInfo(hint){
            this.loading.value = true;
            getEmpPageInfo({
                empName: this.search.empName,
                workId: this.search.workId,
                positionId: this.search.positionId,
                deptId: this.search.deptId,
                companyName: this.search.companyName,
                pageNum: this.paging.pageNum,
                pageSize: this.paging.pageSize
            }).then(data=>{
                this.$response.loadPageInfo({
                    data:data,
                    executeFn: ()=>{
                        this.empData = data.list;
                        this.paging.total = data.total;
                    },
                    hint: hint,
                    log: '员工表信息'
                })
                this.loading.value = false;
            })
        },
        init(){
            this.loadCompanyOptions();
            this.loadDeptOptions();
            this.loadPositionOptions();
            this.loadEmpPageInfo();
        }
    },
    created() {
        this.init();
    },
    mounted() {
        this.$refs.wWabList.open = false;
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.tab-list{
    height: 99%;
}
.el-select-dropdown__item{
    width: 100%;
    color: darkgray;
}
.el-select{
    width: 170px;
}
.el-select-dropdown{
    width: 200px;
}
.sh{
    width: 270px;
    display: flex;
}
.sh-item{
    margin-right: 20px;
}
.sh-title{
    display: inline;
    width: 100px;
    line-height: 32px;
    /*padding: 10px;*/
}
.col{
    display: flex;
}
.row {
    margin-bottom: 12px;
}
.bottom-row{
    margin-bottom: 0;
}
</style>
